<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>

  <script>
    // 常量路由，全部用户都可以访问到的路由
    const constRoute = [
      {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login', // 命名路由，动态添加路由需要使用到命名路由
        meta: {
          title: '登陆',
          hidden: true,
          icon: 'Promotion',
        },
      },
      {
        path: '/',
        component: () => import('@/layout/index.vue'),
        name: 'layout',
        redirect: '/home',
        meta: {
          title: '',
          hidden: false,
          icon: '',
        },
        children: [
          {
            path: '/home',
            component: () => import('@/views/home/index.vue'),
            meta: {
              title: '首页',
              hidden: false,
              icon: 'UserFilled',
            },
          },
        ],
      },
      {
        path: '/screen',
        component: () => import('@/views/screen/index.vue'),
        name: 'Screen',
        meta: {
          hidden: false,
          title: '数据大屏',
          icon: 'Platform',
        },
      },
      {
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404',
        meta: {
          title: '404',
          hidden: true,
          icon: 'Grid',
        },
      },
    ]

    // 异步路由：用户所拥有的路由
    const asyncRoute = [
      {
        path: '/acl',
        component: () => import('@/layout/index.vue'),
        name: 'Acl',
        meta: {
          title: '权限管理',
          icon: 'Lock',
        },
        redirect: '/acl/user',
        children: [
          {
            path: '/acl/user',
            component: () => import('@/views/acl/user/index.vue'),
            name: 'User',
            meta: {
              title: '用户管理',
              icon: 'User',
            },
          },
          {
            path: '/acl/role',
            component: () => import('@/views/acl/role/index.vue'),
            name: 'Role',
            meta: {
              title: '角色管理',
              icon: 'UserFilled',
            },
          },
          {
            path: '/acl/permission',
            component: () => import('@/views/acl/permission/index.vue'),
            name: 'Permission',
            meta: {
              title: '菜单管理',
              icon: 'Monitor',
            },
          },
        ],
      },

      {
        path: '/product',
        component: () => import('@/layout/index.vue'),
        name: 'Product',
        meta: {
          title: '商品管理',
          icon: 'Goods',
        },
        redirect: '/product/trademark',
        children: [
          {
            path: '/product/trademark',
            component: () => import('@/views/product/trademark/index.vue'),
            name: 'Trademark',
            meta: {
              title: '品牌管理',
              icon: 'ShoppingCartFull',
            },
          },
          {
            path: '/product/attr',
            component: () => import('@/views/product/attr/index.vue'),
            name: 'Attr',
            meta: {
              title: '属性管理',
              icon: 'ChromeFilled',
            },
          },
          {
            path: '/product/spu',
            component: () => import('@/views/product/spu/index.vue'),
            name: 'Spu',
            meta: {
              title: 'SPU管理',
              icon: 'Calendar',
            },
          },
          {
            path: '/product/sku',
            component: () => import('@/views/product/sku/index.vue'),
            name: 'Sku',
            meta: {
              title: 'SKU管理',
              icon: 'Orange',
            },
          },
        ],
      },
    ]

    // 任意路由
    const anyRoute = [
      {
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'Any',
        meta: {
          title: '任意路由',
          hidden: true,
          icon: 'StarFilled',
        },
      },
    ]

    let guigu333 = ['Product', 'Trademark', 'Sku']
    function filterAsyncRoute(asyncRoute, routes) {
      return asyncRoute.filter((item) => {
        if (routes.includes(item.name)) {
          if (item.children && item.children.length > 0) {
            // 将过滤出来的数据赋值给上级路由的children
            item.children = filterAsyncRoute(item.children, routes)
          }
          return true
        }
      })
    }

    // 硅谷333 需要的展示的异步路由
    let guigu333Route = filterAsyncRoute(asyncRoute, guigu333)
    console.log('🚀 ~ guigu333Route:', guigu333Route)

    // 第二个登陆：对比的全部路由发生变化(需要深拷贝)
    const guigu444 = ['Product', 'Spu']
    console.log(filterAsyncRoute(asyncRoute, guigu444))
  </script>
</html>
